<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空气质量检测表</title>
  <style>
    #empTb {
      margin: 0px auto;
      width: 800px;
      border: 1px solid red;
      text-align: center;
      border-collapse: collapse;
    }

    #box {
      margin: 0px auto;
      text-align: center;
    }

    tr th {
      border: 1px solid red;
    }
  </style>
  <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(function () {
      $("tr:even").css("background", "pink");
    })
  </script>
</head>

<body>
<h1 style="text-align: center">空气检测质量</h1>
<a href="addAir.html" style="margin-right: 200px; float: right">添加空气质量信息</a><br>
<table id="empTb">
  <tr>
    <th>序号</th>
    <th>区域</th>
    <th>检测时间</th>
    <th>pm10数据</th>
    <th>pm2.5数据</th>
    <th>监测站</th>
  </tr>
</table>
<div id="box">
  <a href="javascript:void(0)" id="first" class="pages">首页</a>
  <a href="javascript:void(0)" id="prev" class="pages">上一页</a>
  <a href="javascript:void(0)" id="next" class="pages">下一页</a>
  <a href="javascript:void(0)" id="last" class="pages">最后一页</a>
</div>
<script>
  $(function () {
    var getList = function () {
      $.ajax({
        type: "post",
        url: "getAll.do",
        datatype: "json",
        success: function (result) {
         // window.event.returnValue = false;
          console.log(result)
          $("#empTb").find("td").remove();
          $.each(result, function (index, obj) {
            var $newtr = "<tr>"
                    + "<td style='border: 1px solid red'>" + obj.id + "</td>"
                    + "<td style='border: 1px solid red'>" + obj.local+ "</td>"
                    + "<td style='border: 1px solid red'>" + obj.detetime + "</td>"
                    + "<td style='border: 1px solid red'>" + obj.pmten + "</td>"
                    + "<td style='border: 1px solid red'>" + obj.pmtpf + "</td>"
                    + "<td style='border: 1px solid red'>" + obj.deteplace + "</td>"
                    + "</tr>"
            //append表示将节点追加在指定元素的末尾
            $("#empTb").append($newtr);
          });
        }
      })
    }
    getList();
  })

</script>
</body>
</html>